<template>
    <view class="container" :class="{ paddingBottomBar: OrderDetail.status == 0 }" v-if="OrderDetail">
        <header-bar :config="config"></header-bar>
        <view class="order-main">
            <!-- <view v-for="item in OrderDetail.orders">{{item.logisticNumber}}</view> -->
            <view class="pending-list-item" @click="goDetail">
                <view class="order-num">订单数</view>
                <view class="order-item-num">
                    <view
                        ><text class="strong">{{ OrderDetail.orderCount }}</text
                        >个订单</view
                    >
                    <view class="car"
                        ><view>{{ OrderDetail.vehicleTypeName }}</view
                        ><image src="../../static/icon/car.png" mode="aspectFill" class="default-img"></image
                    ></view>
                </view>
                <view class="order-info">
                    <view>
                        <view class="title">商品数量</view>
                        <view
                            ><text>{{ OrderDetail.productCount }}</text
                            >件</view
                        >
                    </view>
                    <view>
                        <view class="title">总重量</view>
                        <view
                            ><text>{{ OrderDetail.totalWeight }}</text
                            >kg</view
                        >
                    </view>
                    <view>
                        <view class="title">总体积</view>
                        <view
                            ><text>{{ OrderDetail.totalVolume }}</text
                            >方</view
                        >
                    </view>
                </view>
                <view class="total"
                    ><view>推荐运输路线（预计运输{{ OrderDetail.totalRoute }}km）</view></view
                >
                <view v-if="OrderDetail.orders.length > 0">
                    <view v-for="(item, index) in OrderDetail.orders">
                        <view class="step"
                            ><view class="fetch" :class="{ give: index != 0 }">{{ index == 0 ? "取" : "送" }}</view
                            >{{ index == 0 ? item.repositoryName : item.addressName }}</view
                        >
                        <view class="desc">{{ item.address }}</view>
                        <view class="iconlist" v-if="index + 1 != OrderDetail.orders.length">
                            <uni-icons type="arrowdown" class="downicon" size="16"></uni-icons>
                            <uni-icons type="arrowdown" class="downicon" size="16"></uni-icons>
                            <uni-icons type="arrowdown" class="downicon" size="16"></uni-icons>
                        </view>
                        <view class="line" v-if="index + 1 != OrderDetail.orders.length"></view>
                    </view>
                </view>
            </view>
        </view>

        <view class="bottom-bar" v-if="OrderDetail.status == 0">
            <button class="btn" @click="grab">立即抢单</button>
        </view>

        <uni-popup ref="tip" type="dialog">
            <uni-popup-dialog
                type="text"
                title="温馨提示"
                content="确定立即抢单？"
                :before-close="true"
                @close="close"
                @confirm="confirm"></uni-popup-dialog>
        </uni-popup>
    </view>
</template>

<script>
import { mapMutations } from "vuex"
import easyProImage from "@/components/easy/easy-pro-image.vue"
import { GetOrderDetail, OrderCancel } from "@/service/api/order.js"
import { MapSendDetail, SetMapSendDelivery } from "@/pages_tms/service/logistics.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    components: {
        easyProImage,
    },
    data() {
        return {
            config: {
                title: "待接单详情",
                centerSlot: true,
                rightSlot: false,
                color: ["#333333"],
                rightBtns: [
                    {
                        id: 1,
                        type: "redo",
                    },
                ],
            },
            orderId: 0,
            OrderDetail: null,
        }
    },
    created() {},
    onLoad(e) {
        this.orderId = e.orderId
    },
    mounted() {},
    onShow() {
        this.getData()
    },
    methods: {
        ...mapMutations(["UP_MAP_VIEW"]),
        getData() {
            let path = "?id=" + this.orderId
            MapSendDetail(path).then((res) => {
                if (res.State == 1) {
                    this.OrderDetail = res.Data
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        grab() {
            this.$refs.tip.open()
        },
        confirm() {
            let path = {
                mapSendId: this.OrderDetail.id,
            }
            SetMapSendDelivery(path).then((res) => {
                if (res.State == 1) {
                    this.close()
                    this.easyToast("抢单成功！")
                    setTimeout((e) => {
                        this.upOrderView()
                        this.getData()
                        setTimeout((e) => {
                            this.easyGoBack()
                        }, 1000)
                    }, 1500)
                } else {
                    this.easyToast(res.Msg)
                }
            })
        },
        //关闭提示
        close() {
            this.$refs.tip.close()
        },
        upOrderView() {
            this.UP_MAP_VIEW(new Date().getTime())
            console.log(98989)
        },
    },
}
</script>

<style lang="scss">
.item-group {
    background: $color-white;
    margin-bottom: $app-page-padding;
}

.state-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16rpx $app-page-padding;
    background: $color-yellow-1;

    .order-num {
        flex: 1;
    }

    .order-state {
        display: flex;
        flex-direction: row;

        .icon {
            margin-right: 10rpx;
        }
    }
}

.cell-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 $app-page-padding;
    height: 90rpx;
    .cell-label {
        flex: 1;
        display: flex;
        align-items: center;
    }
}
.order-delivery-date {
    .cell-item {
        border-bottom: solid 1rpx $border;
    }
    .delivery-info {
        padding: $app-page-padding;
        .title {
            display: flex;
            margin-bottom: 16rpx;
            font-weight: 700;
        }
        .delivery-info-item {
            padding: 8rpx 0;
            display: flex;
            flex-direction: row;
            .label {
                color: $app-color-text-tip;
                flex: 1;
            }
            .user-name-text {
                margin-right: 20rpx;
            }
        }
    }
}
.bottom-bar {
    display: flex;
    justify-content: flex-end;
    .btn {
        width: 654rpx;
        height: 80rpx;
        background: #0091ff;
        border-radius: 12rpx;
        color: #fff;
        font-size: 34rpx;
    }
}

.order-main {
    padding: $app-page-padding;
}
.pending-list-item {
    padding: $app-item-padding;
    border-radius: 16rpx;
    background: #fff;
    margin-bottom: $app-item-padding;
    .order-num {
        font-size: 28rpx;
        color: #666666;
        padding-top: 16rpx;
        padding-left: 40rpx;
    }
    .order-item-num {
        display: flex;
        justify-content: space-between;
        color: #333333;
        font-size: 28rpx;
        margin: 0 $app-item-padding 22rpx $app-item-padding;
        padding: 0 16rpx 28rpx 16rpx;
        border-bottom: 1rpx solid #f0f0f0;
        .strong {
            font-size: 56rpx;
            font-weight: bold;
        }
        image {
            width: 48rpx;
            height: 48rpx;
            padding-left: 16rpx;
        }
        .car {
            display: flex;
            font-size: 32rpx;
            justify-content: start;
            align-items: end;
            padding-bottom: 6rpx;
        }
    }
    .order-info {
        display: flex;
        justify-content: space-around;
        margin-left: -$app-item-padding;
        margin-right: -$app-item-padding;
        padding-bottom: 20rpx;
        & > view {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-size: 24rpx;
            color: #333;
            .title {
                padding-bottom: 12rpx;
                color: #666;
            }
            text {
                font-size: 34rpx;
                font-weight: bold;
            }
        }
    }
    .total {
        display: flex;
        justify-content: space-between;
        font-size: 28rpx;
        color: #333;
        padding: 24rpx 0 0 0;
        .right {
            color: #898b9d;
            display: flex;
            align-items: center;
        }
    }
    .go {
        height: 80rpx;
        background: #0091ff;
        border-radius: 12rpx;
        font-size: 34rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-weight: 400;
    }
}

.step {
    margin-top: 32rpx;
    display: flex;
    font-weight: 500;
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
    padding-bottom: 14rpx;
    .fetch {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        background: #2559ff;
        font-size: 23rpx;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 32rpx;
        font-weight: normal;
    }
    .give {
        background: #6dd9c9;
    }
}
.desc {
    color: #666666;
    font-size: 28rpx;
    padding-left: 72rpx;
}
.iconlist {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 8rpx;
    margin-top: -10rpx;
    .downicon {
        color: #ccc;
        margin: -5rpx 0;
    }
}
.line {
    height: 1rpx;
    background: #f0f0f0;
    margin-left: 72rpx;
}
</style>
